import React from 'react';
import { Link } from 'react-router-dom';
import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';
import { z } from 'zod';
import { useTranslation } from 'react-i18next';
import { cn } from '@/lib/utils';
import { Button } from '@/components/ui/button';
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import { toast } from '@/components/ui/use-toast';
import { Card, CardContent } from '@/components/ui/card';
import './styles.less';

const FormSchema = z.object({
    email: z.string().email({
        message: 'Please enter the correct email address.' /* 请输入正确的邮箱 */,
    }),
    password: z.string().min(6, {
        message: 'password must be at least 6 characters.' /* 密码至少6个字符 */,
    }),
});

export default function AuthenticationPage() {
    const { t } = useTranslation();

    const form = useForm<z.infer<typeof FormSchema>>({
        resolver: zodResolver(FormSchema),
        defaultValues: {
            email: '',
            password: '',
        },
    });

    function onSubmit(data: z.infer<typeof FormSchema>) {
        toast({
            title: 'You submitted the following values:' /* 您提交了以下值 */,
            description: (
                <pre className='mt-2 w-[340px] rounded-md bg-slate-950 p-4'>
                    <code className='text-white'>{JSON.stringify(data, null, 2)}</code>
                </pre>
            ),
        });
    }
    return (
        <div className='flex-1 flex'>
            <div className='flex-[2] hidden lg:flex flex-col justify-center items-center dark:border-r'>
                <div className='my-10 flex-1 relative bg-muted p-10 text-white flex flex-col '>
                    <div className='bg-image absolute inset-0 bg-zinc-900 rounded-lg' />
                    <div className='relative z-20 flex items-center text-lg font-medium '>
                        <svg
                            xmlns='http://www.w3.org/2000/svg'
                            viewBox='0 0 24 24'
                            fill='none'
                            stroke='currentColor'
                            strokeWidth='2'
                            strokeLinecap='round'
                            strokeLinejoin='round'
                            className='mr-2 h-6 w-6'
                        >
                            <path d='M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3' />
                        </svg>
                        Pdv Inc
                    </div>
                    <div className='relative z-20 mt-auto'>
                        <blockquote className='space-y-2'>
                            <p className='text-lg'>
                                &ldquo;人不是因为没有信念而失败，而是因为不能把信念化成行动，并且坚持到底。&rdquo;
                            </p>
                            <footer className='text-sm'>戴尔·卡耐基</footer>
                        </blockquote>
                    </div>
                </div>
            </div>
            <div className='flex-1 flex justify-center items-center'>
                <div className='mx-auto flex flex-col justify-center space-y-6 sm:w-[350px]'>
                    <div className='flex flex-col space-y-2 text-center'>
                        <h1 className='text-2xl font-semibold tracking-tight'>{t('login.title', '登录账户')}</h1>
                        <p className='text-sm text-muted-foreground'>
                            {t('login.description', '输入邮箱密码完成登录')}
                        </p>
                    </div>
                    <Card className={cn('pt-6')}>
                        <CardContent>
                            <Form {...form}>
                                <form onSubmit={form.handleSubmit(onSubmit)} className='space-y-6'>
                                    <FormField
                                        control={form.control}
                                        name='email'
                                        render={({ field }) => (
                                            <FormItem>
                                                <FormLabel>{t('login.email', '邮箱')}</FormLabel>
                                                <FormControl>
                                                    <Input
                                                        placeholder={t('login.emailPlaceholder', '请输入邮箱')}
                                                        {...field}
                                                    />
                                                </FormControl>
                                                <FormMessage />
                                            </FormItem>
                                        )}
                                    />
                                    <FormField
                                        control={form.control}
                                        name='password'
                                        render={({ field }) => (
                                            <FormItem>
                                                <div className='flex items-center'>
                                                    <FormLabel htmlFor='password'>
                                                        {t('login.password', '密码')}
                                                    </FormLabel>
                                                    <Link
                                                        to='/forgot'
                                                        className='ml-auto inline-block text-sm underline'
                                                    >
                                                        {t('login.forgot', '忘记密码？')}
                                                    </Link>
                                                </div>
                                                <FormControl>
                                                    <Input
                                                        placeholder={t('login.passwordPlaceholder', '请输入密码')}
                                                        {...field}
                                                    />
                                                </FormControl>
                                                <FormMessage />
                                            </FormItem>
                                        )}
                                    />
                                    <Button type='submit' className='w-full'>
                                        {t('login.login', '登录')}
                                    </Button>
                                    <Button variant='outline' className='w-full'>
                                        {t('login.loginWidthGoogle', '使用Google登录')}
                                    </Button>
                                </form>
                            </Form>
                            <div className='mt-4 text-center text-sm'>
                                <span className='mr-2'>{t('login.DontHaveAccount', '没有账户？')}</span>
                                <Link to='/register' className='underline'>
                                    {t('login.signup', '注册')}
                                </Link>
                            </div>
                        </CardContent>
                    </Card>
                    <p className='px-8 text-center text-sm text-muted-foreground'>
                        <span className='mr-2'>By clicking continue, you agree to our</span>
                        <Link to='/terms' className='underline underline-offset-4 hover:text-primary'>
                            Terms of Service
                        </Link>
                        <span className='mx-2'>and</span>
                        <Link to='/privacy' className='underline underline-offset-4 hover:text-primary'>
                            Privacy Policy
                        </Link>
                        .
                    </p>
                </div>
            </div>
        </div>
    );
}
